<template>
  <div id="testlist">
    <el-dialog
      :title="'填写单位：'+deptname"
      :visible.sync="dialogVisible"
      width="1060px" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <section class="wboxd" style="width:1000px;">
        <el-table :data="units" highlight-current-row v-loading="unitlistLoading" border>
          <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth">
          </el-table-column>
          <el-table-column prop="name" label="单位名称">
          </el-table-column>
          <el-table-column prop="fenshu" width="200" label="评价分数" v-if="$route.params.year>=2021">
          </el-table-column>
          <el-table-column prop="jieguo" width="200" label="定性评价">
          </el-table-column>
        </el-table>
      </section>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/assess' }">干部考核</el-breadcrumb-item>
      <el-breadcrumb-item>外部评价</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxs">
    <!--工具条-->
      <div>
        <el-upload style="float:right"
          :action="$http.defaults.baseURL+'api/prj/outside/upload/'+this.$route.params.year"
          :on-success="getImportList"
          :before-upload="beforeUpload"
          :on-error="uploadError"
          :multiple="false"
          :show-file-list="false"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
          <el-button type="success" icon="el-icon-document">导入外部评价</el-button>
        </el-upload>
        <div style="line-height:40px">年度：<b>{{$route.params.year}}</b></div>
      </div>
    </section>
    <section class="wboxd" style="margin-top:10px">
      <!--列表-->
      <h1>外部评价列表</h1>
      <el-table :data="prjs" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="tableHeight" border>
        <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth">
        </el-table-column>
        <el-table-column prop="tbname" label="填写单位">
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" @click="detailPrj(scope.row.id)" type="text" icon="el-icon-search">查看详情</el-button>
            <el-button size="small" @click="delPrj(scope.row.id)" type="text" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      unitlistLoading: false,
      units: [],
      deptname: '',
      dialogVisible: false,
      discs: {},
      prjs: [],
      listLoading: false,
      changeSizeFlag: false,
      tableHeight: 100
    }
  },
  methods: {
    getImportList (res) {
      if (res.success) {
        this.$message({
          message: '导入成功！' + res.message,
          type: 'success'
        })
        this.getPrj()
      } else {
        console.log(res.Msg)
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    },
    uploadError (err) {
      this.$message({
        message: '上传失败:' + err,
        type: 'error'
      })
    },
    beforeUpload (file) {
      const isFormat = file.name.indexOf('.xlsx') > 0 || file.name.indexOf('.xls') > 0
      const isLt50M = file.size / 1024 / 1024 < 5000
      if (!isLt50M) {
        this.$message.error('单个附件不能超过50M!')
      } else {
        this.saveloading = true
      }
      if (!isFormat) {
        this.$message.error('导入文件必须为xls或xlsx格式!')
      } else {
        this.saveloading = true
      }
      return isLt50M && isFormat
    },
    detailPrj (id) {
      this.unitlistLoading = true
      this.$http
        .post(`/api/prj/outside/details/` + id)
        .then(response => {
          this.unitlistLoading = false
          this.units = JSON.parse(response.data.content)
          this.deptname = response.data.tbname
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.dialogVisible = true
    },
    getPrj () {
      this.listLoading = true
      this.$http
        .post(`/api/prj/outside/list/` + this.$route.params.year)
        .then(response => {
          this.listLoading = false
          this.prjs = response.data
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    delPrj (id) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'error'
      }).then(() => {
        this.$http.post(`/api/prj/outside/remove/` + id).then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
          this.getPrj()
        })
      }).catch(() => {
      })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 252
      })
    }
  },
  mounted () {
    this.getPrj()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  .el-table--border th, .el-table--border td {
    border-right: 1px solid #95B8E7;
  }
  .el-table th.is-leaf, .el-table td {
    border-bottom: 1px solid #95B8E7;
  }

</style>
<style scoped>
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
